<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器demo</title>
    <style>
        .main{display: flex;flex-flow: column nowrap;flex: 1;width: 100%}
        .main div{ width: 100%;height: 100px;border: 1px solid red; }
        /* 给有 title 属性的标签设置字体颜色为红色，[title]会选中有 title 属性的元素。 */
        [title]{color: red;}
        /* 给属性 class 值为 two 的元素添加字体样式。[class="two"]会选中 class 名为 two 的元素 */
        [class="two"]{color: red;}
        /* 选取 class 中有 two 名的元素，[class~="two"]选取属性值中包含 two 的元素 */
        [class~="one"]{background-color: #8edff3;}
    </style>
</head>
<body>
    <div class="main">
        <div title="lua">我有title属性</div>
        <div class="one">我的className=one</div>
        <div class="three one two">我的className=three one two</div>
        <div class="two">我的className=two</div>
        <div>
            <span title="lu">我也有title属性</span>
        </div>
    </div>
</body>
</html>